$line: 2px;
$time: 0.3s;

.circular {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::after {
    content: " ";
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    transition: all $time;
    border-radius: 50%;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::after {
      width: 200%;
      padding-top: 200%;
    }
  }
}

.circular-lt {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::before {
    content: " ";
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    transition: all $time;
    border-radius: 50%;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::before {
      width: 300%;
      padding-top: 300%;
    }
  }
}

.circular-rt {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::before {
    content: " ";
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    width: 0;
    height: 0;
    transition: all $time;
    border-radius: 50%;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::before {
      width: 300%;
      padding-top: 300%;
    }
  }
}

.circular-lb {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::before {
    content: " ";
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 0;
    height: 0;
    transition: all $time;
    border-radius: 50%;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::before {
      width: 300%;
      padding-top: 300%;
    }
  }
}

.circular-rb {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::before {
    content: " ";
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
    width: 0;
    height: 0;
    transition: all $time;
    border-radius: 50%;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::before {
      width: 300%;
      padding-top: 300%;
    }
  }
}

.slide {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::after {
    content: " ";
    z-index: 1;
    position: absolute;
    left: 0;
    height: 0;
    width: 100%;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::after {
      height: 100%;
    }
  }
}

.slide-l {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::after {
    content: " ";
    z-index: 1;
    position: absolute;
    left: 0;
    height: 100%;
    width: 0;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::after {
      width: 100%;
    }
  }
}

.slide-t {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::after {
    content: " ";
    z-index: 1;
    position: absolute;
    top: 0;
    width: 100%;
    height: 0;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::after {
      height: 100%;
    }
  }
}

.slide-r {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::after {
    content: " ";
    z-index: 1;
    position: absolute;
    right: 0;
    height: 100%;
    width: 0;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::after {
      width: 100%;
    }
  }
}

.slide-b {
  position: relative;
  overflow: hidden;

  >* {
    position: absolute;
    z-index: 2;
  }

  &::after {
    content: " ";
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::after {
      height: 100%;
    }
  }
}

.bars-l {
  position: relative;

  &::after,
  &::before {
    content: " ";
    position: absolute;
    left: 0;
    width: 0;
    height: $line;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &::after {
    top: -$line;
  }

  &::before {
    bottom: -$line;
  }

  &:hover {

    &::before,
    &::after {
      width: 100%;
    }
  }
}

.bars-r {
  position: relative;

  &::after,
  &::before {
    content: " ";
    position: absolute;
    right: 0;
    width: 0;
    height: $line;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &::after {
    top: -$line;
  }

  &::before {
    bottom: -$line;
  }

  &:hover {

    &::before,
    &::after {
      width: 100%;
    }
  }
}

.bars-lr {
  position: relative;

  &::after {
    content: " ";
    position: absolute;
    top: -$line;
    left: 0;
    width: 0;
    height: $line;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &::before {
    content: " ";
    position: absolute;
    bottom: -$line;
    right: 0;
    width: 0;
    height: $line;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {

    &::before,
    &::after {
      width: 100%;
    }
  }
}

.overline {
  position: relative;

  &::after {
    content: " ";
    position: absolute;
    top: -$line;
    right: 0;
    width: 0;
    height: $line;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &::before {
    content: " ";
    position: absolute;
    bottom: -$line;
    width: 0;
    height: $line;
    transition: all $time;
    background-color: var(--el-color-primary-light-3);
  }

  &:hover {
    &::after {
      left: 0;
      width: 100%;
    }

    &::before {
      right: 0;
      width: 100%;
    }
  }
}